
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { ArrowUpDown } from "lucide-react";

interface GroupSortingControlsProps {
  sortBy: string;
  setSortBy: (value: string) => void;
}

export const GroupSortingControls = ({ sortBy, setSortBy }: GroupSortingControlsProps) => {
  return (
    <div className="flex items-center gap-2 mb-4">
      <Button variant="ghost" size="sm" className="text-gray-600">
        <ArrowUpDown className="w-4 h-4 mr-1" />
        Sort by:
      </Button>
      <Select value={sortBy} onValueChange={setSortBy}>
        <SelectTrigger className="w-48">
          <SelectValue placeholder="Select sorting option" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="most-members">Most Members</SelectItem>
          <SelectItem value="active-recently">Active Recently</SelectItem>
          <SelectItem value="newly-created">Newly Created</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
};
